<script setup>
import {ref, watch} from 'vue'

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  },
})

const emit = defineEmits(['close', 'confirm'])

// 表单数据
const form = ref({
  // 给一个默认值，防止渲染出错
  id: props.rowData.id || '',
  storeName: props.rowData.storeName || '',
  onlineOrdering: props.rowData.onlineOrdering === 1 || false,
  allowDineIn: props.rowData.allowDineIn === 1 || false,
  paymentTime: props.rowData.paymentTime || 0,
  orderMode: props.rowData.orderMode || 0,
  onlinePayment: props.rowData.onlinePayment === 1 || 0,
  offlinePayment: props.rowData.offlinePayment === 1 || 0,
  businessHours: props.rowData.businessHours || '09:00-23:00', // 修改为字符串格式
})

// 营业时间范围（根据初始值设置）
const timeRange = ref([])

// 初始化时间选择器
const initTimeRange = () => {
  if (form.value.businessHours) {
    const [start, end] = form.value.businessHours.split('-')
    const [startHour, startMinute] = start.split(':')
    const [endHour, endMinute] = end.split(':')

    timeRange.value = [
      new Date(2023, 1, 1, parseInt(startHour), parseInt(startMinute)),
      new Date(2023, 1, 1, parseInt(endHour), parseInt(endMinute))
    ]
  } else {
    timeRange.value = [
      new Date(2023, 1, 1, 8, 0, 0),
      new Date(2023, 1, 1, 22, 0, 0)
    ]
  }
}

// 初始化
initTimeRange()

// 处理时间选择
const handleTimeChange = (val) => {
  if (val && val.length === 2) {
    form.value.businessHours =
        `${val[0].getHours().toString().padStart(2, '0')}:${val[0].getMinutes().toString().padStart(2, '0')}-` +
        `${val[1].getHours().toString().padStart(2, '0')}:${val[1].getMinutes().toString().padStart(2, '0')}`
  }
}

// 业务模式选项
const paymentTimeOptions = [
  {value: 1, label: '餐前付款'},
  {value: 0, label: '餐后付款'}
]

// 接单方式选项
const orderModeOptions = [
  {value: 1, label: '自动接单'},
  {value: 0, label: '手动接单'}
]


// 打开退款设置弹窗
const showRefundDialog = ref(false)

// 退款设置
const refundSetting = ref({
  autoRefund: false,
  refundTimeLimit: 7,
  refundPercentage: 100
})

// 提交表单
const submitForm = () => {
  console.log('提交表单:', form.value)
  form.value.onlinePayment = form.value.onlinePayment ? 1 : 0
  form.value.offlinePayment = form.value.offlinePayment ? 1 : 0
  form.value.onlineOrdering = form.value.onlineOrdering ? 1 : 0
  form.value.allowDineIn = form.value.allowDineIn ? 1 : 0
  emit('confirm', form.value)
  emit('close')

}
</script>

<template>
  <el-dialog
      title="门店设置编辑"
      width="50%"
      :model-value="true"
      @close="emit('close')"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="店铺名称">
        <el-input v-model="form.storeName" placeholder="请输入店铺名称" disabled/>
      </el-form-item>

      <el-form-item label="开启在线点餐">
        <el-switch v-model="form.onlineOrdering" active-text="开启" inactive-text="关闭"/>
      </el-form-item>
      <el-form-item label="开启堂食">
        <el-switch v-model="form.allowDineIn" active-text="开启" inactive-text="关闭"/>
      </el-form-item>

      <el-form-item label="业务模式">
        <el-select v-model="form.paymentTime" placeholder="请选择业务模式">
          <el-option
              v-for="item in paymentTimeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="接单方式">
        <el-select v-model="form.orderMode" placeholder="请选择接单方式">
          <el-option
              v-for="item in orderModeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="支付配置">
        <el-checkbox v-model="form.onlinePayment" label="线上支付 "/>
        <el-checkbox v-model="form.offlinePayment" label="线下支付 "/>
      </el-form-item>

      <el-form-item label="营业时间">
        <el-time-picker
            is-range
            v-model="timeRange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择营业时间"
            format="HH:mm"
            @change="handleTimeChange"
        />
        <div style="margin-top: 8px; color: #666;">
          当前设置: {{ form.businessHours }}
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="emit('close')">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </template>


  </el-dialog>
</template>

<style scoped>
.el-select, .el-input, .el-time-picker {
  width: 100%;
}
</style>